<template>
  <view class="fund-list-page">
    <view class="list-header">
      <view class="title">{{ getTitle() }}</view>
    </view>

    <view v-if="projects.length > 0" class="project-list">
      <view
        v-for="(project, index) in projects"
        :key="project.id"
        class="project-item"
        @click="viewProjectDetail(project)"
      >
        <image class="project-image" :src="project.image || getDefaultImage()" mode="aspectFill" />
        <view class="project-info">
          <view class="project-name">{{ project.projectName }}</view>
          <view class="project-progress">
            <wd-progress :percentage="calculateProgress(project)" :show-text="false" />
            <view class="progress-text">
              <text>已筹：¥{{ formatNumber(project.raisedFund) }}</text>
              <text>目标：¥{{ formatNumber(project.targetFund) }}</text>
            </view>
          </view>
          <view class="project-desc">{{ project.projectIntro }}</view>
          <view class="project-date">
            <text>项目日期：{{ project.startDate }} 至 {{ project.endDate }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-else class="empty-state">
      <image class="empty-image" src="/static/empty.png" mode="aspectFit" />
      <text class="empty-text">暂无项目数据</text>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more">
      <wd-button size="small" @click="loadMore">加载更多</wd-button>
    </view>

    <view v-else-if="projects.length > 0" class="no-more">
      <text>没有更多数据了</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getFundProjectPage, type FundProject } from "@/api/fund";

// 页面参数
const type = ref("");
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const projects = ref<FundProject[]>([]);
const hasMore = ref(true);
const loading = ref(false);

// 获取页面标题
const getTitle = () => {
  if (type.value === "修谱") return "修谱项目";
  if (type.value === "修墓") return "修墓项目";
  if (type.value === "修祠") return "修祠项目";
  return "基金项目";
};

// 获取默认图片
const getDefaultImage = () => {
  if (type.value === "修谱") return "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/6dbd9f9fdab44ca4a6409ad787126bb3.png";
  if (type.value === "修墓") return "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/9780ab19c86840c086e361eb576940b1.png";
  if (type.value === "修祠") return "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/8de8503736f244718c1dd3c2abd042b3.png";
  return "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/6dbd9f9fdab44ca4a6409ad787126bb3.png";
};

// 加载项目数据
const loadProjects = async () => {
  if (loading.value) return;
  loading.value = true;

  try {
    console.log(pageNum.value, pageSize.value, type.value);
    const res = await getFundProjectPage(pageNum.value, pageSize.value, type.value);
    if (res) {
      if (pageNum.value === 1) {
        projects.value = res.list;
      } else {
        projects.value = [...projects.value, ...res.list];
      }

      total.value = res.total;
      hasMore.value = projects.value.length < total.value;
    }
  } catch (error) {
    console.error("获取基金项目数据失败", error);
    uni.showToast({
      title: "获取数据失败，请重试",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 加载更多
const loadMore = () => {
  if (!hasMore.value || loading.value) return;
  pageNum.value++;
  loadProjects();
};

// 格式化数字
const formatNumber = (num: number) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

// 计算进度
const calculateProgress = (project: FundProject) => {
  if (!project.targetFund || project.targetFund === 0) return 0;
  const progress = (project.raisedFund / project.targetFund) * 100;
  return Math.min(100, Math.max(0, Math.round(progress)));
};

// 查看项目详情
const viewProjectDetail = (project: FundProject) => {
  uni.navigateTo({
    url: `/pages/work/fund/detail?id=${project.id}`,
  });
};

// 初始化
onMounted(() => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1] as any;

  // 获取参数
  if (page.options) {
    type.value = page.options.type || "";
  }

  // 加载数据
  loadProjects();
});
</script>

<style lang="scss">
.fund-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.list-header {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.project-list {
  .project-item {
    display: flex;
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .project-image {
      width: 200rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .project-info {
      flex: 1;

      .project-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
      }

      .project-progress {
        margin-bottom: 15rpx;

        .progress-text {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          color: #666;
          margin-top: 6rpx;
        }
      }

      .project-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .project-date {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
}

.no-more {
  text-align: center;
  padding: 30rpx 0;
  font-size: 26rpx;
  color: #999;
}
</style>
